@import "~terriajs-variables";
@import "~terriajs-mixins";
@import url("https://fonts.googleapis.com/css?family=Montserrat:700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Nunito:600,600i&display=swap");

@include keyframes(fade-in) {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@include keyframes(fade-out) {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@include keyframes(slide-up) {
  0% {
    @include transform(translate(-50%, 0%));
  }
  100% {
    @include transform(translate(-50%, -50%));
  }
}
@include keyframes(slide-down) {
  0% {
    @include transform(translate(-50%, -50%));
  }
  100% {
    @include transform(translate(-50%, 0%));
  }
}

@include keyframes(streamers-stretch) {
  0% {
    transform: scale(1, 5);
  }
  100% {
    transform: scale(1);
  }
}

@include keyframes(streamers-pop) {
  0% {
    transform: translate(-50%, 0) scale(1, 1);
  }
  50% {
    transform: translate(-50%, 0) scale(1, 1.5);
  }
  100% {
    transform: translate(-50%, 0) scale(1, 1);
  }
}
@include keyframes(streamers-draw) {
  0% {
    stroke-dasharray: 100%;
    stroke-dashoffset: 100%;
  }
  100% {
    stroke-dasharray: 100%;
    stroke-dashoffset: 0%;
  }
}
@include keyframes(streamers-fill) {
  0% {
    fill-opacity: 0;
  }
  100% {
    fill-opacity: 1;
  }
}
@include keyframes(streamers-drop) {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@include keyframes(hat-drop) {
  0% {
    transform: translateY(-300%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.Hat {
  @media (max-width: $sm), (max-height: 559px) {
    display: none;
  }

  position: absolute;
  top: 3px;
  left: 31px;
  width: 18px;
  height: 18px;

  transform: translateY(-300%);
  opacity: 0;

  @include animation("hat-drop");
  animation-timing-function: linear;
  animation-duration: 0.3s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

/* Streamers */

.Streamers--wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0 auto;
  transform: translate(-50%, 0);

  @include animation("streamers-pop");
  transform-origin: top;
  animation-timing-function: linear;
  animation-duration: 0.3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}
.Streamers path {
  @include animation("streamers-draw, streamers-fill, streamers-stretch");
  animation-timing-function: linear, linear;
  animation-duration: 2s, 0.3s, 1.5s;
  animation-delay: 0.5s, 2s;
  animation-fill-mode: both, both, both;
}
.Streamers circle,
.Streamers ellipse {
  @include animation("streamers-drop");
  animation-timing-function: linear;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: both;
}

@include keyframes(rainbow) {
  50% {
    background-position: 100% 50%;
  }
}

/* Toggle button */

@mixin rainbow() {
  background: linear-gradient(
    124deg,
    #ff2400,
    #e81d1d,
    #e8b71d,
    #e3e81d,
    #1de840,
    #1ddde8,
    #2b1de8,
    #dd00f3,
    #dd00f3
  );
  background-size: 1000%;
  @include animation("rainbow");
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.ToggleCelebration {
  composes: btn from "~terriajs/lib/Sass/common/_buttons.scss";
  composes: btn from "~terriajs/lib/ReactViews/Map/Navigation/nav.scss";
  &:not(:root) {
    text-align: center;
    padding-left: 2px;
    margin: 0 auto;
  }
  &:hover,
  &:focus {
    @include rainbow();
  }
}

/* Modal (should actually split modal and content) */
.PopupModalWrapper {
  color: white;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($dark-with-overlay, 0.8);
  opacity: 1;
  @include animation("fade-in");
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}
.PopupModalWrapper-closing {
  @include animation("fade-out");
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  & > article {
    @media (min-width: $sm) and (min-height: 560px) {
      @include animation("slide-down");
      animation-duration: 0.3s;
    }
  }
}

.PopupModal {
  font-family: "Nunito", "Open Sans";
  text-align: center;
  box-shadow: $box-shadow;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  margin: 0;
  width: 480px;
  @media (max-width: $sm), (max-height: 559px) {
    position: relative;
    width: 100%;
    transform: none;
    left: 0;
    top: 0;
    overflow: scroll;
    height: 100vh;
  }
  @media (min-width: $sm) and (min-height: 560px) {
    min-height: 560px;
  }

  padding: 0;
  // fallback for bad image
  background-color: #072734;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;

  @include transform(translate(-50%, -50%));
  @media (min-width: $sm) and (min-height: 560px) {
    @include animation("slide-up");
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
  }
  h1 {
    position: relative;
    font-family: "Montserrat";
    font-size: 40px;
    width: 70%;
    @media (max-width: $sm) {
      width: 100%;
    }
    margin: 65px auto 30px;
  }
}
.PopupModal-button {
  composes: btn from "~terriajs/lib/Sass/common/_buttons.scss";
  composes: btn-primary from "~terriajs/lib/Sass/common/_buttons.scss";
  position: relative;
  &:not(:root) {
    width: 280px;
    margin: 0 auto 10px;
  }
}
.PopupModal-button--Icon {
  position: absolute;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translate(0, -50%);
}
.PopupModal-body {
  color: rgba($text-light, 0.8);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.PopupModal-questions {
  font-style: italic;
  font-size: 16px;
  line-height: 28px;
}
.PopupModal-closeLink {
  font-size: 14px;
  background: none;
  border: none;
  &:hover,
  *:focus {
    text-decoration: underline;
  }
}
.PopupModal-footer {
  display: flex;
  justify-content: center;
  align-items: center;

  @media (min-width: $sm) and (min-height: 560px) {
    position: absolute;
    bottom: 0;
  }

  width: 100%;
  min-height: 32px;
  text-align: center;
  font-size: 14px;
  line-height: 32px;

  color: #69513a;
  background-color: #cea67d;
}
